<template>
  <div>
    <nav-bar>
      <div slot="center">辅助工时已审核列表</div>
    </nav-bar>
    <van-nav-bar
      class="app-nav-bar"
      title="辅助工时已审核列表"
      left-arrow
      @click-left="onClickLeft()"
    />

    <div class="m-grid">
      <table border="0" cellPadding="0" cellspacing="0">
        <thead>
          <tr>
            <th>姓名</th>
            <th>工作内容</th>
            <th>工时</th>
            <th>说明</th>
            <th>审核结果</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(data, index) in dataList" :key="index">
            <td>{{ data.USERNAME }}</td>
            <td>{{ data.APPLYCONTENT }}</td>
            <td>{{ data.STEPPER * data.STANDARDTIME }}</td>
            <td>{{ data.CONTENT }}</td>
            <td v-if="data.STATUS === '0'">
              <button style="background-color: #e2bb0b">待审核</button>
            </td>
            <td v-if="data.STATUS === '1'"><button>通过</button></td>
            <td v-if="data.STATUS === '2'">
              <button style="background-color: #d9001b">拒绝</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- <button style="font-size: 20px;    margin-left: 134px;
      margin-top: 25px;margin-bottom: 20px;" @click="dataTest"
    >接口测试</button>

    <div style="width: 100%;">
      {{testSource.DataTable.diffgram.DocumentElement.Table}}
    </div> -->
  </div>
</template>

<script>
import axios from "axios";
import { getApplyCheckList } from "../../api/perfrom";
import NavBar from '../../components/NavBar.vue'
export default {
  name: "applyCheckDoneList",
  data() {
    return {
      dataList: [],
      testSource: {
        DataTable: {
          diffgram: {
            DocumentElement: {
              Table: {},
            },
          },
        },
      },
    };
  },
  components: {
    NavBar,
  },
  beforeRouteLeave(to, from, next) {
        // 设置下一个路由的 meta
      to.meta.keepAlive = true;  // 让 A 缓存，即不刷新
      next();
  },
  mounted() {
    this.getInfoList();
  },
  methods: {
    getInfoList() {
      getApplyCheckList()
        .then((res) => {
          console.log(res);
          this.dataList = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onClickLeft() {
      this.$router.push("/perform");
    },
    // dataTest: function() {
    //   axios.get("/areas/interface/mdcinterface.asmx/GetMachineInfo")
    //   .then((res) => {
    //     this.testSource = this.$x2js.xml2js(res.data)
    //     console.log(this.$x2js.xml2js(res.data))
    //   }).catch((error) => {
    //     console.warn(error)
    //   })
    // },
  },
};
</script>

<style scoped lang="less">
.m-grid {
  margin-top: 136px;
}
table {
  width: 100%;
  padding: 0 2px 0 2px;
}
table tr th {
  color: #646566;
  font-weight: 300;
  padding: 0.3rem 0.1rem;
  font-size: 0.4rem;
  border-bottom: 1px solid #7f7f7f;
}
table tr td {
  color: #646566;
  padding: 10px 0;
  text-align: center;
  font-size: 0.373333rem;
  border-bottom: 1px solid #7f7f7f;
  button {
    border-radius: 5px;
    padding: 2px 4px;
    border: none;
    color: #fff;
    background-color: #169bd5;
  }
}
</style>
